<template>
  <div class="card content-box">
    <el-form ref="ruleFormRef" :rules="rules" :model="formData" style="width: 1600px" label-width="122px">
      <div>
        <p>基本信息</p>
      </div>
      <el-form-item class="item" label="通知模板名称 :" prop="noticeRuleName">
        <el-input v-model="formData.noticeRuleName" placeholder="请填写名称" />
      </el-form-item>
      <el-form-item class="item" label="状态 :" prop="useStatusLable">
        <el-radio v-model="formData.useStatusLable" label="true">启用</el-radio>
        <el-radio v-model="formData.useStatusLable" label="false">禁用</el-radio>
      </el-form-item>
      <el-form-item class="item" label="模块 :" prop="module">
        <el-select v-model="formData.module" @change="moduleChange">
          <el-option label="请求管理" value="request" />
          <el-option label="问题管理" value="problem" />
          <el-option label="变更管理" value="change" />
          <el-option label="发布管理" value="release" />
          <el-option label="资产管理" value="cim" />
        </el-select>
      </el-form-item>
      <el-form-item class="item" label="通知对象 :">
        <el-checkbox
          v-if="
            formData.module == 'request' ||
            formData.module == 'problem' ||
            formData.module == 'change' ||
            formData.module == 'release'
          "
          v-model="formData.requester"
          label="请求人报告人"
          size="large"
        />
        <el-checkbox
          v-if="
            formData.module == 'request' ||
            formData.module == 'problem' ||
            formData.module == 'change' ||
            formData.module == 'release'
          "
          v-model="formData.technicianType"
          label="指派的技术员"
          size="large"
        />
        <el-checkbox
          v-if="formData.module == 'request' || formData.module == 'problem' || formData.module == 'change'"
          v-model="formData.technicalGroup"
          label="指派的技术组"
          size="large"
        />
        <el-checkbox v-if="formData.module == 'request'" v-model="formData.owner" label="负责人" size="large" />
        <el-checkbox
          v-if="
            formData.module == 'request' ||
            formData.module == 'problem' ||
            formData.module == 'change' ||
            formData.module == 'release'
          "
          v-model="formData.taskGroupAndTechnician"
          label="任务指派对象(组或技术员)"
          size="large"
        />
        <el-checkbox
          v-if="formData.module == 'request' || formData.module == 'problem' || formData.module == 'change'"
          v-model="formData.taskTechnicalGroupLeader"
          label="指派组组长"
          size="large"
        />
        <el-checkbox v-if="formData.module == 'cim'" v-model="formData.ciOwner" label="负责人" size="large" />
        <el-checkbox v-if="formData.module == 'cim'" v-model="formData.ciUse" label="使用人" size="large" />
      </el-form-item>

      <el-form-item class="item" label="通知方式 :" prop="email">
        <el-checkbox v-model="formData.mailNotice" label="邮箱通知" size="large" />
        <el-checkbox v-model="formData.smsNotice" label="短信通知" size="large" />
        <el-checkbox v-model="formData.imNotice" label="IM消息通知" size="large" />
        <el-checkbox v-model="formData.pushNotice" label="手机消息推送" size="large" />
      </el-form-item>
      <el-form-item class="item" label="通知到指定用户 :">
        <el-dialog title="选择用户" v-model="notifiUserdialogVisible">
          <div :style="{ height: '500px' }">
            <moreSelectUser @send-data="sendDataNotifiUser" />
          </div>
        </el-dialog>
        <el-row>
          <el-col :span="12" :style="{ width: '1200px' }">
            <el-input v-model="formData.technician" placeholder="请选择用户" clearable></el-input>
          </el-col>
          <el-col :span="12" :style="{ width: '200px' }" @click="notifiUserdialogVisible = true">
            <el-icon>
              <User />
            </el-icon>
            选择用户
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item class="item" label="通知到指定邮件 :">
        <el-dialog title="选择用户邮箱" v-model="notifiEmaildialogVisible">
          <div :style="{ height: '500px' }">
            <moreSelectUser @send-data="sendDataNotifiEmail" />
          </div>
        </el-dialog>
        <el-row>
          <el-col :span="12" :style="{ width: '1200px' }">
            <el-input v-model="formData.emailAddress" placeholder="请填写邮箱" clearable></el-input>
          </el-col>
          <el-col :span="12" :style="{ width: '200px' }" @click="notifiEmaildialogVisible = true">
            <el-icon>
              <EditPen />
            </el-icon>
            选择邮箱
          </el-col>
        </el-row>
      </el-form-item>
      <div>
        <p>通知内容模板</p>
      </div>
      <el-row>
        <el-col :span="16">
          <el-form-item class="item" label="短信模板 :">
            <el-row>
              <el-col :span="12" :style="{ width: '1200px' }">
                <el-input
                  v-model="formData.smsTemp"
                  placeholder="请填写"
                  clearable
                  id="smsTemp"
                  @click="clickInput('smsTemp')"
                ></el-input>
              </el-col>
              <el-col :span="1" :style="{ width: '200px' }" @click="see(formData.smsTemp)">
                <el-icon>
                  <View />
                </el-icon>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="item" label="IM消息模板 :">
            <el-row>
              <el-col :span="12" :style="{ width: '1200px' }">
                <el-input
                  v-model="formData.imTemp"
                  placeholder="请填写"
                  clearable
                  id="imTemp"
                  @click="clickInput('imTemp')"
                ></el-input>
              </el-col>
              <el-col :span="1" :style="{ width: '200px' }" @click="see(formData.imTemp)">
                <el-icon>
                  <View />
                </el-icon>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="item" label="消息推送模板 :">
            <el-row>
              <el-col :span="12" :style="{ width: '1200px' }">
                <el-input
                  v-model="formData.pushTemp"
                  placeholder="请填写"
                  clearable
                  id="pushTemp"
                  @click="clickInput('pushTemp')"
                ></el-input>
              </el-col>
              <el-col :span="1" :style="{ width: '200px' }" @click="see(formData.pushTemp)">
                <el-icon>
                  <View />
                </el-icon>
              </el-col>
            </el-row>
          </el-form-item>
          <div>
            <p>邮件模板</p>
          </div>
          <el-form-item class="item" label="标题 :">
            <el-row>
              <el-col :span="12" :style="{ width: '1200px' }">
                <el-input
                  v-model="formData.emailTitleTemp"
                  placeholder="请填写"
                  clearable
                  id="emailTitleTemp"
                  @click="clickInput('emailTitleTemp')"
                ></el-input>
              </el-col>
              <el-col :span="1" :style="{ width: '200px' }" @click="see(formData.emailTitleTemp)">
                <el-icon>
                  <View />
                </el-icon>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item class="item" label="内容 :">
            <el-dialog title="预览" v-model="showEmailTempdialogVisible">
              <div :style="{ height: '500px' }">
                <div v-html="showEmailTemp"></div>
              </div>
            </el-dialog>
            <el-row>
              <el-col :span="12" :style="{ width: '1200px' }">
                <el-input
                  v-model="formData.emailTemp"
                  type="textarea"
                  :rows="16"
                  id="emailTemp"
                  @click="clickInput('emailTemp')"
                />
              </el-col>
              <el-col :span="1" :style="{ width: '200px' }" @click="seeContent">
                <el-icon>
                  <View />
                </el-icon>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="4" :style="{ width: '600px' }">
          <TreeFilter label="name" :data="treeFilterData" @change="changeTreeFilter" />
        </el-col>
      </el-row>
      <el-form-item>
        <el-button type="primary" @click="onSubmit(ruleFormRef)"> 保存 </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts" name="basicForm">
import { ElMessage, FormInstance, FormRules, ElMessageBox } from "element-plus";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { getjggl, emailtest, emailtestexchange, testSMSAccount, getjgglmessage, mergeCompany } from "@/api/modules/jggl";
import { OrgManager } from "@/api/interface";
import { isTelOrFax, isEmail } from "@/utils/eleValidate";
import moreSelectUser from "@/views/tools/moreUserSelect/index.vue";
import { CirclePlus, Delete, EditPen, View, Search, User } from "@element-plus/icons-vue";
import { vaildateUserByLoginName, addNotices } from "@/api/modules/systemTools";
import TreeFilter from "@/components/TreeFilter/index.vue";
import { getUserDepartment } from "@/api/modules/jggl";
import { useRoute, useRouter } from "vue-router";
import { useTabsStore } from "@/stores/modules/tabs";
const router = useRouter();
const route = useRoute();
const tabStore = useTabsStore();
const treeFilterData = ref<any>([]);

// 点击树形筛选
const changeTreeFilter = (val: string) => {
  let inputBox = document.getElementById(selectInputName.value) as HTMLInputElement; // 获取输入框元素
  if (inputBox) {
    let text = val;
    if (val == "historyRecord") {
      text =
        "<#if (variables.historyRecordDTO?exists && variables.historyRecordDTO?size>0) ><br><table class=\"table_border\"><tr><td>动作 </td><td>详细</td><td>操作者</td><td>操作时间</td></tr><#list variables.historyRecordDTO as historyRecord>    <tr>        <td>            ${historyRecord.logTitle}        </td>        <td>            ${historyRecord.logDetails}        </td>        <td>            ${historyRecord.operator}       </td>        <td>            ${historyRecord.createdTime?string('yyyy-MM-dd HH:MM:ss')}        </td>    </tr></#list></table><br></#if>";
    }
    if (val == "createDate") {
      text = "${variables.createdOn?string('yyyy-MM-dd HH:MM:ss')}";
    }
    if (val == "cimInfos") {
      text =
        '<#if (variables.ciInfos?exists && variables.ciInfos?size>0) ><br><table class="table_border"><tr> <td>固定资产编号</td>  <td>资产名称</td> <td>配置项分类</td> <td>状态</td></tr><#list variables.ciInfos as ciDTO><tr> <td>${ciDTO.cino}</td> <td>${ciDTO.ciname}</td> <td>${ciDTO.categoryName}</td> <td>${ciDTO.status}</td></tr></#list></table></#if>';
    }
    // 要插入的文本
    let cursorPosition = inputBox.selectionStart || 0; // 获取光标位置
    let textBeforeCursor = inputBox.value.substring(0, cursorPosition); // 获取光标前的文本
    let textAfterCursor = inputBox.value.substring(cursorPosition); // 获取光标后的文本
    let newText = textBeforeCursor + text + textAfterCursor; // 组合新的文本
    inputBox.value = newText; // 更新输入框的值
    formData["" + selectInputName.value + ""] = newText;
    inputBox.focus();
    inputBox.selectionStart = cursorPosition + text.length;
    inputBox.selectionEnd = cursorPosition + text.length;
  }
};
const notifiUserdialogVisible = ref(false);
//子组件弹窗回调方法
const sendDataNotifiUser = (data: [OrgManager.ResOrgList]) => {
  notifiUserdialogVisible.value = false;
  let strName = "";
  let str = "";
  if (data.length > 0) {
    for (let i = 0; i < data.length; i++) {
      if (strName == "") {
        strName = data[i].fullName + ";";
      } else {
        strName = strName + data[i].fullName + ";";
      }
      if (str == "") {
        str = data[i].loginName + ";";
      } else {
        str = str + data[i].loginName + ";";
      }
    }
  }
  formData.technician = str;
};

const notifiEmaildialogVisible = ref(false);
//子组件弹窗回调方法
const sendDataNotifiEmail = (data: [OrgManager.ResOrgList]) => {
  notifiEmaildialogVisible.value = false;
  let email = "";
  if (data.length > 0) {
    for (let i = 0; i < data.length; i++) {
      if (data[i].email != "" && data[i].email != undefined)
        if (email == "") {
          email = data[i].email + ";";
        } else {
          email = email + data[i].email + ";";
        }
    }
  }
  if (email == "") {
    formData.emailAddress = "";
    ElMessage.info("选择用户未设置邮箱");
  } else {
    formData.emailAddress = email;
  }
};
const selectInputName = ref("");
const clickInput = (name: string) => {
  selectInputName.value = name;
};
const see = (data: string) => {
  if (data == "") {
    ElMessage.info("请填写数据");
    return;
  }
  let a = data.includes("<#escape x as x!>");
  let b = data.includes("</#escape>");
  let endstr = data.endsWith("</#escape>");
  let startstr = data.startsWith("</#escape>");
  if (!endstr && !startstr) {
    ElMessage.info("数据格式错误");
    return;
  }
  if (a && b) {
    let newStr = data.replace("<#escape x as x!>", "");
    let show = newStr.replace("</#escape>", "");
    show = show.replaceAll("${variables.ecode}", "Ref-2024090400001(demo)");
    show = show.replaceAll("${variables.etitle}", "邮件预览(demo)");
    show = show.replaceAll("${variables.edesc}", "邮件模板修改后的预览(demo)");
    show = show.replaceAll("${variables.ecategoryName}", "请求分类(demo)");
    show = show.replaceAll("${variables.createdByName}", "张三(demo)");
    show = show.replaceAll(
      "<#if (variables.historyRecordDTO?exists && variables.historyRecordDTO?size>0) ><br><table class=\"table_border\"><tr><td>动作 </td><td>详细</td><td>操作者</td><td>操作时间</td></tr><#list variables.historyRecordDTO as historyRecord>    <tr>        <td>            ${historyRecord.logTitle}        </td>        <td>            ${historyRecord.logDetails}        </td>        <td>            ${historyRecord.operator}       </td>        <td>            ${historyRecord.createdTime?string('yyyy-MM-dd HH:MM:ss')}        </td>    </tr></#list></table><br></#if>",
      ""
    );
    show = show.replaceAll("${variables.seriousnessName}", "紧急(demo)");
    show = show.replaceAll("${variables.priorityName}", "高(demo)");
    show = show.replaceAll("${variables.statusName}", "请求新建(demo)");
    show = show.replaceAll("${variables.imodeName}", "网页表单(demo)");
    show = show.replaceAll("${variables.levelName}", "一级：简单的咨询(demo)");
    show = show.replaceAll("${variables.assigneeGroupName}", "国聿服务组(demo)");
    show = show.replaceAll("${variables.technicianName}", "李四(demo)");
    show = show.replaceAll("${variables.solutions}", "解决方案详细内容(demo)");
    show = show.replaceAll("${variables.createdOn?string('yyyy-MM-dd HH:MM:ss')}", "2022-10-10 10:30:00(demo)");
    show = show.replaceAll("${variables.outcome}", "处理完成(demo)");
    show = show.replaceAll("${variables.activityName}", "服务台(demo)");
    show = show.replaceAll("${variables.operator}", "赵六(demo)");
    show = show.replaceAll("${variables.ciname}", "lenovo服务器(demo)");
    show = show.replaceAll(
      '<#if (variables.ciInfos?exists && variables.ciInfos?size>0) ><br><table class="table_border"><tr> <td>固定资产编号</td>  <td>资产名称</td> <td>配置项分类</td> <td>状态</td></tr><#list variables.ciInfos as ciDTO><tr> <td>${ciDTO.cino}</td> <td>${ciDTO.ciname}</td> <td>${ciDTO.categoryName}</td> <td>${ciDTO.status}</td></tr></#list></table></#if>',
      ""
    );
    ElMessageBox.alert(show, "预览模板", {});
  } else {
    ElMessage.error("格式错误");
  }
};
const showEmailTemp = ref();
const showEmailTempdialogVisible = ref(false);
const seeContent = () => {
  let show = formData.emailTemp.replace("<#escape x as x!>", "").replace("</#escape>", "");
  show = show.replaceAll("${variables.ecode}", "Ref-2024090400001(demo)");
  show = show.replaceAll("${variables.etitle}", "邮件预览(demo)");
  show = show.replaceAll("${variables.edesc}", "邮件模板修改后的预览(demo)");
  show = show.replaceAll("${variables.ecategoryName}", "请求分类(demo)");
  show = show.replaceAll("${variables.createdByName}", "张三(demo)");
  show = show.replaceAll(
    "<#if (variables.historyRecordDTO?exists && variables.historyRecordDTO?size>0) ><br><table class=\"table_border\"><tr><td>动作 </td><td>详细</td><td>操作者</td><td>操作时间</td></tr><#list variables.historyRecordDTO as historyRecord>    <tr>        <td>            ${historyRecord.logTitle}        </td>        <td>            ${historyRecord.logDetails}        </td>        <td>            ${historyRecord.operator}       </td>        <td>            ${historyRecord.createdTime?string('yyyy-MM-dd HH:MM:ss')}        </td>    </tr></#list></table><br></#if>",
    ""
  );
  show = show.replaceAll("${variables.seriousnessName}", "紧急(demo)");
  show = show.replaceAll("${variables.priorityName}", "高(demo)");
  show = show.replaceAll("${variables.statusName}", "请求新建(demo)");
  show = show.replaceAll("${variables.imodeName}", "网页表单(demo)");
  show = show.replaceAll("${variables.levelName}", "一级：简单的咨询(demo)");
  show = show.replaceAll("${variables.assigneeGroupName}", "国聿服务组(demo)");
  show = show.replaceAll("${variables.technicianName}", "李四(demo)");
  show = show.replaceAll("${variables.solutions}", "解决方案详细内容(demo)");
  show = show.replaceAll("${variables.createdOn?string('yyyy-MM-dd HH:MM:ss')}", "2022-10-10 10:30:00(demo)");
  show = show.replaceAll("${variables.outcome}", "处理完成(demo)");
  show = show.replaceAll("${variables.activityName}", "服务台(demo)");
  show = show.replaceAll("${variables.operator}", "赵六(demo)");
  show = show.replaceAll("${variables.ciname}", "lenovo服务器(demo)");
  show = show.replaceAll(
    '<#if (variables.ciInfos?exists && variables.ciInfos?size>0) ><br><table class="table_border"><tr> <td>固定资产编号</td>  <td>资产名称</td> <td>配置项分类</td> <td>状态</td></tr><#list variables.ciInfos as ciDTO><tr> <td>${ciDTO.cino}</td> <td>${ciDTO.ciname}</td> <td>${ciDTO.categoryName}</td> <td>${ciDTO.status}</td></tr></#list></table></#if>',
    ""
  );

  showEmailTemp.value = show;
  showEmailTempdialogVisible.value = true;
};
const ruleFormRef = ref<FormInstance>();
const formData = reactive({
  noticeRuleName: "",
  useStatus: true,
  module: "",
  smsTemp: "<#escape x as x!>(请在此填写短信内容)</#escape>",
  imTemp: "<#escape x as x!>(请在此填写IM消息内容)</#escape>",
  pushTemp: "<#escape x as x!>(请在此填写推送消息内容)</#escape>",
  emailTitleTemp: "<#escape x as x!>（请在此填写邮件标题）</#escape>",
  emailTemp: "",
  technician: "",
  noticeRuleType: "",
  emailAddress: "",
  useStatusLable: "true",
  mailNotice: false,
  smsNotice: false,
  imNotice: false,
  pushNotice: false,
  email: "",
  requester: false,
  technicianType: false,
  technicalGroup: false,
  owner: false,
  taskGroupAndTechnician: false,
  taskTechnicalGroupLeader: false,
  ciOwner: false,
  ciUse: false
});

const onSubmit = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      if (formData.requester == true) {
        formData.noticeRuleType += "requester;";
      }
      if (formData.technicianType == true) {
        formData.noticeRuleType += "technician;";
      }
      if (formData.technicalGroup == true) {
        formData.noticeRuleType += "technicalGroup;";
      }
      if (formData.owner == true) {
        formData.noticeRuleType += "owner;";
      }
      if (formData.taskGroupAndTechnician == true) {
        formData.noticeRuleType += "taskGroupAndTechnician;";
      }
      if (formData.taskTechnicalGroupLeader == true) {
        formData.noticeRuleType += "taskTechnicalGroupLeader;";
      }
      if (formData.ciOwner == true) {
        formData.noticeRuleType += "ciOwner;";
      }
      if (formData.ciUse == true) {
        formData.noticeRuleType += "ciUse;";
      }
      formData.useStatus = formData.useStatusLable == "true" ? true : false;
      vaildateUserByLoginName(formData.technician).then(res => {
        if (res.toString() == "true") {
          addNotices(formData, "noticeRuleDTO").then(res => {
            ElMessage.success("保存成功");
            tabStore.removeTabs(route.fullPath);
            router.push(`/system/tools/notificationTemplateManagement?pageNo=${Math.random().toFixed(3)}`);
          });
        } else {
          ElMessage.error("用户不存在请检查");
        }
      });
    } else {
      ElMessage.error("请正确填写表单");
    }
  });
};
const moduleChange = (value: any) => {
  formData.requester = false;
  formData.technicianType = false;
  formData.technicalGroup = false;
  formData.owner = false;
  formData.taskGroupAndTechnician = false;
  formData.taskTechnicalGroupLeader = false;
  formData.ciOwner = false;
  formData.ciUse = false;
  if (value == "request") {
    treeFilterData.value = [
      { id: "${variables.ecode}", name: "编号" },
      { id: "${variables.etitle}", name: "标题" },
      { id: "${variables.edesc}", name: "描述" },
      { id: "${variables.ecategoryName}", name: "分类" },
      { id: "${variables.createdByName}", name: "请求人" },
      { id: "historyRecord", name: "历史记录" },
      { id: "${variables.seriousnessName}", name: "紧急度" },
      { id: "${variables.priorityName}", name: "优先级" },
      { id: "${variables.statusName}", name: "状态" },
      { id: "${variables.imodeName}", name: "来源" },
      { id: "${variables.levelName}", name: "级别" },
      { id: "${variables.assigneeGroupName}", name: "指派组" },
      { id: "${variables.technicianName}", name: "指派人" },
      { id: "${variables.solutions}", name: "解决方案" },
      { id: "createDate", name: "创建时间" },
      { id: "${variables.outcome}", name: "操作流程动作" },
      { id: "${variables.activityName}", name: "任务名称" },
      { id: "${variables.operator}", name: "操作者" }
    ];
  }
  if (value == "problem") {
    treeFilterData.value = [
      { id: "${variables.ecode}", name: "编号" },
      { id: "${variables.etitle}", name: "标题" },
      { id: "${variables.edesc}", name: "描述" },
      { id: "${variables.ecategoryName}", name: "分类" },
      { id: "${variables.createdByName}", name: "请求人" },
      { id: "historyRecord", name: "历史记录" },
      { id: "${variables.seriousnessName}", name: "紧急度" },
      { id: "${variables.priorityName}", name: "优先级" },
      { id: "${variables.statusName}", name: "状态" },
      { id: "${variables.levelName}", name: "级别" },
      { id: "${variables.assigneeGroupName}", name: "指派组" },
      { id: "${variables.technicianName}", name: "指派人" },
      { id: "createDate", name: "创建时间" },
      { id: "${variables.ciname}", name: "配置项名称" },
      { id: "${variables.activityName}", name: "任务名称" },
      { id: "${variables.operator}", name: "操作者" }
    ];
  }
  if (value == "change") {
    treeFilterData.value = [
      { id: "${variables.ecode}", name: "编号" },
      { id: "${variables.etitle}", name: "标题" },
      { id: "${variables.edesc}", name: "描述" },
      { id: "${variables.ecategoryName}", name: "分类" },
      { id: "${variables.createdByName}", name: "请求人" },
      { id: "historyRecord", name: "历史记录" },
      { id: "${variables.seriousnessName}", name: "紧急度" },
      { id: "${variables.priorityName}", name: "优先级" },
      { id: "${variables.statusName}", name: "状态" },
      { id: "${variables.levelName}", name: "级别" },
      { id: "${variables.assigneeGroupName}", name: "指派组" },
      { id: "${variables.technicianName}", name: "指派人" },
      { id: "createDate", name: "创建时间" },
      { id: "${variables.outcome}", name: "操作流程动作" },
      { id: "${variables.activityName}", name: "任务名称" },
      { id: "${variables.operator}", name: "操作者" },
      { id: "cimInfos", name: "配置项信息" }
    ];
  }
  if (value == "release") {
    treeFilterData.value = [
      { id: "${variables.ecode}", name: "编号" },
      { id: "${variables.etitle}", name: "标题" },
      { id: "${variables.edesc}", name: "描述" },
      { id: "${variables.ecategoryName}", name: "分类" },
      { id: "${variables.createdByName}", name: "请求人" },
      { id: "historyRecord", name: "历史记录" },
      { id: "${variables.statusName}", name: "状态" },
      { id: "${variables.levelName}", name: "级别" },
      { id: "${variables.technicianName}", name: "指派人" },
      { id: "createDate", name: "创建时间" },
      { id: "${variables.outcome}", name: "操作流程动作" },
      { id: "${variables.activityName}", name: "任务名称" },
      { id: "${variables.operator}", name: "操作者" }
    ];
  }
  if (value == "cim") {
    treeFilterData.value = [
      { id: "${variables.ecategoryName}", name: "分类" },
      { id: "${variables.statusName}", name: "状态" },
      { id: "createDate", name: "创建时间" },
      { id: "${variables.ciname}", name: "配置项名称" }
    ];
  }
};
const rules = reactive<FormRules>({
  noticeRuleName: [
    { required: true, message: "请输入名称", trigger: "blur" },
    { min: 2, message: "长度为两个字符以上", trigger: "blur" }
  ],
  module: [{ required: true, message: "请选择模块", trigger: "change" }]
});
onMounted(() => {
  formData.emailTemp = `<style>
    .table_border{width:100%}.table_border{ border-collapse:collapse; border:solid
    black; border-width:1px 0 0 1px;}.table_border caption {font-size:14px;font-weight:bolder;}.table_border
    th,.table_border td {border:solid black;border-width:0 1px 1px 0;padding-left:5px;}
</style>
<table width="550">
    <#escape x as x!>
        <tr>
            <td colspan="2">
               
                您好:
                </b>
                </font>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                请在此填写邮件内容
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <br>
                谢谢！
            </td>
        </tr>
        <tr>
            <td colspan="2">
                Helpdesk Team
            </td>
        </tr>
    </#escape>
</table>
<br>
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~
<br>
这是一封系统的邮件，请勿直接回复！
<br>
-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-~`;
});

interface TreeNode {
  value: any;
  lable: any;
  children?: TreeNode[];
  id: string;
  name: string;
  attr: any;
  data: any;
}

function traverseTree(node: TreeNode, callback: (node: TreeNode) => void) {
  callback(node);
  if (node.children) {
    node.children.forEach(child => traverseTree(child, callback));
  }
}
</script>

<style scoped lang="scss">
@import "./index.scss";
.item {
  width: 800px;
}
</style>
